<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>-->
    <!--<link rel="stylesheet/less" type="text/css" href="less.less" />-->
    <!--<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>-->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <script>
        function browserRedirect () {
            var sUserAgent = navigator.userAgent.toLowerCase()
            var bIsIpad = sUserAgent.match(/ipad/i) === 'ipad'
            var bIsIphoneOs = sUserAgent.match(/iphone os/i) === 'iphone os'
            var bIsMidp = sUserAgent.match(/midp/i) === 'midp'
            var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) === 'rv:1.2.3.4'
            var bIsUc = sUserAgent.match(/ucweb/i) === 'ucweb'
            var bIsAndroid = sUserAgent.match(/android/i) === 'android'
            var bIsCE = sUserAgent.match(/windows ce/i) === 'windows ce'
            var bIsWM = sUserAgent.match(/windows mobile/i) === 'windows mobile'
            if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
                return 'phone'
            } else {
                return 'pc'
            }
        }
        setRem()
        window.addEventListener('orientationchange', setRem)
        window.addEventListener('resize', setRem)
        window.addEventListener('resize', setRem)
        function setRem () {
            var html = document.querySelector('html')
            var app = document.getElementById("app");
            var iframe = document.getElementById("iframe");
            if (browserRedirect() === 'pc') {
                if (window.screen.width > 1360) {
                    html.fontSize=750/100+"px"
                }
            }

        }
    </script>
<body>
<style>
    .flex-box{
        display: flex;
        flex-wrap: wrap;
    }
    .flex-ibox{
        display: inline-flex;
        flex-wrap: wrap;
        vertical-align: top;
    }

    /**--row--***/
    .flex-ibox--row-tl,
    .flex-box--row-tl{
        flex-direction:row;
        justify-content:flex-start;
        align-items:flex-start;
        align-content:flex-start;
    }
    .flex-ibox--row-tc,
    .flex-box--row-tc{
        flex-direction:row;
        justify-content:center;
        align-items:flex-start;
        align-content:flex-start;
    }
    .flex-ibox--row-tr,
    .flex-box--row-tr{
        flex-direction:row;
        justify-content:flex-end;
        align-items:flex-start;
        align-content:flex-start;
    }
    .flex-ibox--row-cl,
    .flex-box--row-cl{
        flex-direction:row;
        justify-content:flex-start;
        align-items:center;
        align-content:center;
    }
    .flex-ibox--row-cc,
    .flex-box--row-cc{
        flex-direction:row;
        justify-content:center;
        align-items:center;
        align-content:center;
    }
    .flex-ibox--row-cr,
    .flex-box--row-cr{
        flex-direction:row;
        justify-content:flex-end;
        align-items:center;
        align-content:center;
    }
    .flex-ibox--row-bl,
    .flex-box--row-bl{
        flex-direction:row;
        justify-content:flex-start;
        align-items:flex-end;
        align-content:flex-end;
    }
    .flex-ibox--row-bc,
    .flex-box--row-bc{
        flex-direction:row;
        justify-content:center;
        align-items:flex-end;
        align-content:flex-end;
    }
    .flex-ibox--row-br,
    .flex-box--row-br{
        flex-direction:row;
        justify-content:flex-end;
        align-items:flex-end;
        align-content:flex-end;
    }
    .flex-ibox--row-tsb,
    .flex-box--row-tsb{
        flex-direction:row;
        justify-content:space-between;
        align-items:inherit;
        align-content:flex-start;
    }
    .flex-ibox--row-csb,
    .flex-box--row-csb{
        flex-direction:row;
        justify-content:space-between;
        align-items:center;
        align-content:center;
    }
    .flex-ibox--row-bsb,
    .flex-box--row-bsb{
        flex-direction:row;
        justify-content:space-between;
        align-items:flex-end;
        align-content:flex-end;
    }
    .flex-ibox--row-tsa,
    .flex-box--row-tsa{
        flex-direction:row;
        justify-content:space-around;
        align-items:inherit;
        align-content:flex-start;
    }
    .flex-ibox--row-csa,
    .flex-box--row-csa{
        flex-direction:row;
        justify-content:space-around;
        align-items:center;
        align-content:center;
    }
    .flex-ibox--row-bsa,
    .flex-box--row-bsa{
        flex-direction:row;
        justify-content:space-around;
        align-items:flex-end;
        align-content:flex-end;
    }


    /**--column--***/


    /**--- nowrap --***/
    [class*="flex-box--"].flex-box--nowrap,
    [class*="flex-ibox--"].flex-ibox--nowrap{
        flex-wrap: nowrap;
    }
    /**--- reverse --***/
    [class*="flex-box--"].flex-box--reverse,
    [class*="flex-ibox--"].flex-ibox--reverse{
        flex-direction:row-reverse;
    }
    /**--- baseline --***/
    [class*="flex-box--"].flex-box--baseline,
    [class*="flex-ibox--"].flex-ibox--baseline{
        align-items:baseline;

    }


    *{
        margin:0;
        padding:0;
    }

    html,body{
        width:100%;
        height:100%;
        position:relative;
        font-size:28px;
        background: #000000;
    }

    @media screen and (min-width: 1200px) {
        #app{
            width:750px;
        }
    }

    .show-time-box{
        position:fixed;
        top:0;
        width:100%;
        height:100%;
    }

    #showTime{
        text-align:center;
        font-size:300px;
        color: #ffae28;

    }
    @media screen and (max-width: 750px) {
        #showTime{
            text-align:center;
            font-size:70px;
            color: #ffae28;
            margin-top:-150px;
        }
    }
    #showTime >li{
        float:left;
        list-style:none;
        margin-right:0.2rem;
    }



    input{
        width:50px;
        height:40px;
        border:0;
        outline: 0;
        margin:0 10px;
        text-align: center;
        font-size:20px;

        border-radius:3px;
    }
    .btn-list{
        margin-left:20px;
    }
    .btn{

        display:inline-block;
        background:#ffae28;
        color: #000;
        cursor:pointer;
        border-radius:3px;
        font-size:20px;
        padding:6px 12px;
        margin:0 3px;
       -moz-user-select: none;
        -ms-user-select: none;
        -webkit-user-select: none;
        user-select: none;
        text-align: center;

    }

    .ctrl-container{
        position:fixed;
        top:0;
        left:0;

        width:100%;
        height:100%;
        color: #ffae28;
    }
    @media screen and (max-width: 750px) {
        .ctrl-container{




        }
        .btn-list{
            width:100%;
        }
        .btn{
            display:block;
            margin:20px 0px;
        }
    }

    .model-box{
        display:none;
        width:100%;
        height:100%;
        top:0;
        left:0;
    }

.model-dialog{
    position:relative;
    width:400px;
    height:300px;
    background: #fbfff2;
    border-radius:3px;
    z-index: 99999;
    color:#222;
    font-size:50px;
}
    .model-dialog .model-btns{
        position:absolute;
        top:-50px;
        right:-32px;
        cursor: pointer;
    }
    @media screen and (max-width: 750px) {
        .model-dialog{
            width:80%;
            height:300px;
        }
    }
</style>
    <div class=" model-box flex-box flex-box--row-cc" id="model">

        <div class="model-dialog flex-box flex-box--row-cc " >
            <div class="model-btns">
                <div class="btn-close">
                    <svg t="1605259763327" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8514" width="22" height="22"><path d="M519.98750027 460.33437527L181.925 122.271875a42.1875 42.1875 0 1 0-59.68124973 59.62500027l338.06249946 338.090625-338.06249946 338.090625a42.1875 42.1875 0 1 0 59.653125 59.653125l338.090625-338.06250027 338.090625 338.06250027a42.1875 42.1875 0 1 0 59.653125-59.62500027l-338.06250027-338.11874973 338.06250027-338.06250027a42.1875 42.1875 0 1 0-59.653125-59.653125l-338.06250027 338.06250027z" fill="#ffffff" p-id="8515"></path></svg>
                </div>
            </div>
            <div class="model-content">
            </div>
        </div>
</div>

    <div  class="show-time-box flex-box flex-box--row-cc">
        <ul id="showTime" class=""></ul>
    </div>

    <div  class="ctrl-container  flex-box flex-box--row-bc">
            <div class=" flex-box flex-box--row-tc" style="width:100%;padding-bottom:50px;">
                分<input type="text" min="0"  id="input-min" >
                秒<input type="text" min="0" max="59" id="input-sec"/>
                <div class="btn-list">
                    <div id="btn-start" class="btn">开始</div>
                    <div id="btn-stop" class="btn">暂停</div>
                    <div id="btn-reset" class="btn">重置</div>
                </div>
            </div>
    </div>
<script>
    /**
     * 倒计时器类
     */
    class   CountdownTimer{
        constructor(){
            this.showTime = document.getElementById('showTime')  //显示时间
            this.btnSart = document.getElementById('btn-start') // 开始按钮
            this.btnStop = document.getElementById('btn-stop') //暂停按钮
            this.btnReset = document.getElementById('btn-reset') //复位按钮
            this.inputMin = document.getElementById('input-min') //设置分钟输入
            this.inputSec = document.getElementById('input-sec')//设置秒钟输入
            this.inputSec = document.getElementById('input-sec')//设置秒钟输入
            this.model = document.getElementById('model')//模态框
            this.modelContent = this.model.getElementsByClassName('model-content')[0]
            this.modelBtnClose = this.model.getElementsByClassName('btn-close')[0]
            this.min = 10 //分钟初始值 1mim
            this.sec = 59 //秒钟初始值 0s
            this.timer = null //定时器
            this.timerEn = false //定时器使能
            this.inputMin.value = this.min//初始值
            this.inputSec.value = this.sec
        }
        //显示时间
        show(){
            this.showTime.innerHTML =
                "<li>"+parseInt(this.min / 10)+parseInt(this.min % 10)+":</li>"+
                "<li>"+parseInt(this.sec / 10)+parseInt(this.sec % 10)+"</li>"
        }
        //初始化
        init(){
           setTimeout(()=>{
                this.showModel("欢迎使用<p style='font-size:16px'>可使用空格键 开始 或者 暂停</p>")
            },100)

            setTimeout(this.closeModel,5000)
            this.timer = setInterval(()=>{
                if(this.timerEn){
                    this.countOnceSecond()
                }
            }, 50);
            this.show()
            this.events()
        }
        /**
         * 精确的1秒钟延迟触发事件方法
         * @param fn
         * @returns {Function}
         * @private
         */
        delayOneSecond(fn){
            // 利用闭包保存时间
            let last = +new Date()
            return (..._args)=> {
                let args = _args
                let now = +new Date()
                if (now - last >= 1000) {
                    fn.apply(this, args)
                    last = +new Date()
                }
            }
        }
        /**
         * 处理计数值
         */
        handleCount(){
            if(this.min <= 0 && this.sec <= 0){
                this.timerEn = false
                this.min =0
                this.sec = 0
                this.showModel("THE END!")
                return
            }
            this.sec--
            if(this.sec<0){
                this.sec=59
                this.min--
            }
        }
        /**
         * 一秒钟计数一次
         * @returns {*}
         */
        countOnceSecond  =(()=>{
            return this.delayOneSecond(() => {
                this.handleCount()
                this.show()
            })
        })()

        /**
         *
         * 检查输入的字符，必须是数字才有效
         */
        checkInputValue(){
            //处理输入的min字符，保证是合法的数字
            this.inputMin.onchange=()=>{
                if(this.inputMin.value === '' || this.inputMin.value < 0){
                    this.inputMin.value = 0
                }
                this.inputMin.value =  parseInt(this.inputMin.value)
            }
            //处理输入的min字符，保证是合法的数字
            this.inputSec.onchange=()=>{
                if(this.inputSec.value === '' || this.inputSec.value < 0 ){
                    this.inputSec.value = 0
                }
                if(this.inputSec.value >59){
                    this.showModel('不能大于59')
                    setTimeout(this.closeModel,1000)
                    this.inputSec.value = 59
                }
                this.inputSec.value = parseInt(this.inputSec.value)
            }
        }
        /**
         * 点击开始
         */
        clickStart(){
            this.btnSart.onclick=()=>{
                this.timerEn = true
            }
        }
        /**
         * 点击暂停
         */
        clickStop(){
            this.btnStop.onclick = ()=>{
                this.timerEn = false
            }
        }
        /**
         * 显示模态框
         */
        showModel(contxt){
            this.model.style.display = 'flex'
            this.modelContent.innerHTML = contxt
        }
        /**
         * 关闭模态框
         **/
        clickCloseModel(){
            this.modelBtnClose.onclick=()=>{
                this.model.style.display = 'none'
            }
        }
        closeModel(){
              this.model.style.display = 'none'
        }
        /**
         * 键盘空格键控制开始或者暂停
         */
        onkeydown(){
            document.onkeydown =  (e)=> {

                // 兼容FF和IE和Opera
                let theEvent = window.event || e;
                let code = theEvent.keyCode || theEvent.which || theEvent.charCode;

                //如果摁下空格键，则允许操作开始或者暂停
                if (code === 32) {
                    this.timerEn === true ? this.timerEn = false : this.timerEn = true
                }
            }
        }
        /**
         *复位
         */
        reset(){
            this.btnReset.onclick=()=>{
                if(this.inputMin.value === ''){
                    this.inputMin.value = 0
                }
                this.timerEn = false
                this.min= parseInt(this.inputMin.value)
                this.sec = parseInt(this.inputSec.value)
                this.show()
            }
        }
        /**
         * 操作事件挂载
         */
        events(){
            this.checkInputValue()
            this.clickStart()
            this.clickStop()
            this.onkeydown()
            this.reset()
            this.clickCloseModel()
        }
    }


    const countdownTimer = new CountdownTimer()
    countdownTimer.init()



</script>
<!--<script>-->
    <!--/**-->
     <!--* 精确的1秒钟延迟触发事件方法-->
     <!--* @param fn-->
     <!--* @returns {Function}-->
     <!--* @private-->
     <!--*/-->
    <!--/**-->
     <!--* 倒计时器类-->
     <!--*/-->
    <!--var CountdownTimer = /** @class */ (function () {-->
        <!--function CountdownTimer() {-->
            <!--var _this = this;-->
            <!--/**-->
             <!--* 一秒钟计数一次-->
             <!--* @returns {*}-->
             <!--*/-->
            <!--this.countOnceSecond = (function () {-->
                <!--return _this.delayOneSecond(function () {-->
                    <!--_this.handleCount();-->
                    <!--_this.show();-->
                <!--});-->
            <!--})();-->
            <!--this.showTime = document.getElementById('showTime'); //显示时间-->
            <!--this.btnSart = document.getElementById('btn-start'); // 开始按钮-->
            <!--this.btnStop = document.getElementById('btn-stop'); //暂停按钮-->
            <!--this.btnReset = document.getElementById('btn-reset'); //复位按钮-->
            <!--this.inputMin = document.getElementById('input-min'); //设置分钟输入-->
            <!--this.inputSec = document.getElementById('input-sec'); //设置秒钟输入-->
            <!--this.inputSec = document.getElementById('input-sec'); //设置秒钟输入-->
            <!--this.model = document.getElementById('model'); //模态框-->
            <!--this.modelContent = this.model.getElementsByClassName('model-content')[0];-->
            <!--this.modelBtnClose = this.model.getElementsByClassName('btn-close')[0];-->
            <!--this.min = 10; //分钟初始值 1mim-->
            <!--this.sec = 59; //秒钟初始值 0s-->
            <!--this.timer = null; //定时器-->
            <!--this.timerEn = false; //定时器使能-->
            <!--//初始值-->
            <!--this.inputMin.value = this.min;-->
            <!--this.inputSec.value = this.sec;-->
        <!--}-->
        <!--//显示时间-->
        <!--CountdownTimer.prototype.show = function () {-->
            <!--this.showTime.innerHTML =-->
                <!--"<li>" + parseInt(this.min / 10) + parseInt(this.min % 10) + ":</li>" +-->
                <!--"<li>" + parseInt(this.sec / 10) + parseInt(this.sec % 10) + "</li>";-->
        <!--};-->
        <!--//初始化-->
        <!--CountdownTimer.prototype.init = function () {-->
            <!--var _this = this;-->
            <!--setTimeout(function () {-->
                <!--_this.showModel("欢迎使用<p style='font-size:16px'>可使用空格键 开始 或者 暂停</p>");-->
            <!--}, 100);-->
            <!--setTimeout(this.closeModel, 5000);-->
            <!--this.timer = setInterval(function () {-->
                <!--if (_this.timerEn) {-->
                    <!--_this.countOnceSecond();-->
                <!--}-->
            <!--}, 50);-->
            <!--this.show();-->
            <!--this.events();-->
        <!--};-->
        <!--CountdownTimer.prototype.delayOneSecond = function (fn) {-->
            <!--var _this = this;-->
            <!--// 利用闭包保存时间-->
            <!--var last = +new Date();-->
            <!--return function () {-->
                <!--var _args = [];-->
                <!--for (var _i = 0; _i < arguments.length; _i++) {-->
                    <!--_args[_i] = arguments[_i];-->
                <!--}-->
                <!--var args = _args;-->
                <!--var now = +new Date();-->
                <!--if (now - last >= 1000) {-->
                    <!--fn.apply(_this, args);-->
                    <!--last = +new Date();-->
                <!--}-->
            <!--};-->
        <!--};-->
        <!--/**-->
         <!--* 处理计数值-->
         <!--*/-->
        <!--CountdownTimer.prototype.handleCount = function () {-->
            <!--if (this.min <= 0 && this.sec <= 0) {-->
                <!--this.timerEn = false;-->
                <!--this.min = 0;-->
                <!--this.sec = 0;-->
                <!--this.showModel("THE END!");-->
                <!--return;-->
            <!--}-->
            <!--this.sec&#45;&#45;;-->
            <!--if (this.sec < 0) {-->
                <!--this.sec = 59;-->
                <!--this.min&#45;&#45;;-->
            <!--}-->
        <!--};-->
        <!--/**-->
         <!--*-->
         <!--* 检查输入的字符，必须是数字才有效-->
         <!--*/-->
        <!--CountdownTimer.prototype.checkInputValue = function () {-->
            <!--var _this = this;-->
            <!--//处理输入的min字符，保证是合法的数字-->
            <!--this.inputMin.onchange = function () {-->
                <!--if (_this.inputMin.value === '' || _this.inputMin.value < 0) {-->
                    <!--_this.inputMin.value = 0;-->
                <!--}-->
                <!--_this.inputMin.value = parseInt(_this.inputMin.value);-->
            <!--};-->
            <!--//处理输入的min字符，保证是合法的数字-->
            <!--this.inputSec.onchange = function () {-->
                <!--if (_this.inputSec.value === '' || _this.inputSec.value < 0) {-->
                    <!--_this.inputSec.value = 0;-->
                <!--}-->
                <!--if (_this.inputSec.value > 59) {-->
                    <!--_this.showModel('不能大于59');-->
                    <!--setTimeout(_this.closeModel, 1000);-->
                    <!--_this.inputSec.value = 59;-->
                <!--}-->
                <!--_this.inputSec.value = parseInt(_this.inputSec.value);-->
            <!--};-->
        <!--};-->
        <!--/**-->
         <!--* 点击开始-->
         <!--*/-->
        <!--CountdownTimer.prototype.clickStart = function () {-->
            <!--var _this = this;-->
            <!--this.btnSart.onclick = function () {-->
                <!--_this.timerEn = true;-->
            <!--};-->
        <!--};-->
        <!--/**-->
         <!--* 点击暂停-->
         <!--*/-->
        <!--CountdownTimer.prototype.clickStop = function () {-->
            <!--var _this = this;-->
            <!--this.btnStop.onclick = function () {-->
                <!--_this.timerEn = false;-->
            <!--};-->
        <!--};-->
        <!--/**-->
         <!--* 显示模态框-->
         <!--*/-->
        <!--CountdownTimer.prototype.showModel = function (contxt) {-->
            <!--this.model.style.display = 'flex';-->
            <!--this.modelContent.innerHTML = contxt;-->
        <!--};-->
        <!--/**-->
         <!--* 关闭模态框-->
         <!--**/-->
        <!--CountdownTimer.prototype.clickCloseModel = function () {-->
            <!--var _this = this;-->
            <!--this.modelBtnClose.onclick = function () {-->
                <!--_this.model.style.display = 'none';-->
            <!--};-->
        <!--};-->
        <!--CountdownTimer.prototype.closeModel = function () {-->
            <!--this.model.style.display = 'none';-->
        <!--};-->
        <!--/**-->
         <!--* 键盘空格键控制开始或者暂停-->
         <!--*/-->
        <!--CountdownTimer.prototype.onkeydown = function () {-->
            <!--var _this = this;-->
            <!--document.onkeydown = function (e) {-->
                <!--// 兼容FF和IE和Opera-->
                <!--var theEvent = window.event || e;-->
                <!--var code = theEvent.keyCode || theEvent.which || theEvent.charCode;-->
                <!--//如果摁下空格键，则允许操作开始或者暂停-->
                <!--if (code === 32) {-->
                    <!--_this.timerEn === true ? _this.timerEn = false : _this.timerEn = true;-->
                <!--}-->
            <!--};-->
        <!--};-->
        <!--/**-->
         <!--*复位-->
         <!--*/-->
        <!--CountdownTimer.prototype.reset = function () {-->
            <!--var _this = this;-->
            <!--this.btnReset.onclick = function () {-->
                <!--if (_this.inputMin.value === '') {-->
                    <!--_this.inputMin.value = 0;-->
                <!--}-->
                <!--_this.timerEn = false;-->
                <!--_this.min = parseInt(_this.inputMin.value);-->
                <!--_this.sec = parseInt(_this.inputSec.value);-->
                <!--_this.show();-->
            <!--};-->
        <!--};-->
        <!--/**-->
         <!--* 操作事件挂载-->
         <!--*/-->
        <!--CountdownTimer.prototype.events = function () {-->
            <!--this.checkInputValue();-->
            <!--this.clickStart();-->
            <!--this.clickStop();-->
            <!--this.onkeydown();-->
            <!--this.reset();-->
            <!--this.clickCloseModel();-->
        <!--};-->
        <!--return CountdownTimer;-->
    <!--}());-->
    <!--var countdownTimer = new CountdownTimer();-->
    <!--countdownTimer.init();-->
    <!--//# sourceMappingURL=demo.js.map-->
<!--</script>-->
</body>

</html>